<template>
  <div>
    <!-- 一张附件 -->
    <a-row v-if="fileNumber === 'one'">
      <a-upload
        :multiple="false"
        :action="action"
        :file-list="FileList"
        :before-upload="spotFileBeforeUpload"
        @change="handleChange"
      >
        <a-button> <a-icon type="upload" /> {{ tip }} </a-button>
      </a-upload>
    </a-row>
    <!-- 多张附件 -->
    <a-row v-if="fileNumber === 'more'">
      <a-upload
        :multiple="true"
        :action="action"
        :before-upload="spotFileBeforeUpload"
        :file-list="FileList"
        @change="handleChange"
      >
        <a-button> <a-icon type="upload" /> 上传文件 </a-button>
      </a-upload>
    </a-row>
  </div>
</template>

<script>
export default {
  props: {
    // 文件数量类型
    fileNumber: {
      type: String
    },
    // 提示语
    tip: {
      type: String
    },
    // 附件文件数组
    FileList: {
      type: Array
    },
    // 上传附件接口
    action: {
      type: String
    }
  },
  data() {
    return {};
  },
  components: {},
  methods: {
    // 限制附件大小
    spotFileBeforeUpload(file) {
      if (file.size >= 5 * 1024 * 1024) {
        this.$message.error("文件的大小不超过5M");
        return false;
      }
      return true;
    },
    // 上传附件
    handleChange(info) {
      let fileList = [...info.fileList];
      if (this.fileNumber === "one") {
        fileList = fileList.slice(-1); //限制十张
      } else if (this.fileNumber === "more") {
        fileList = fileList.slice(-10); //限制十张
      }
      fileList = fileList.map(file => {
        if (file.response) {
          file.url = file.response.url;
        }
        return file;
      });
      fileList = fileList.filter(it => it.status !== "error");
      if (info.file.status === "error") {
        this.$message.error(`${info.file.name} 上传失败.`);
      }
      this.$emit("UpdateFile", fileList);
    }
  }
};
</script>

<style scoped>
.uploadImg >>> .ant-upload {
  width: 104px;
  height: 104px;
  margin: 0;
  padding: 0;
}
.uploadImg >>> .ant-upload .ant-upload-text {
  font-size: 12px;
}
.uploadImg >>> .ant-upload .ant-upload-textimg {
  height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
}
/* 拖拽样式 */
ul {
  padding: 0;
}
.syllable_ul span {
  display: flex;
  flex-wrap: wrap;
}
.upimg {
  width: 86px;
  height: 86px;
}
.ant-upload-list-item {
  width: 104px;
  height: 104px;
  margin-right: 20px;
}
.ant-upload-list {
  display: block !important;
}
</style>
